<template>
  <div class="container mx-auto p-4">
    <div class="grid grid-cols-2 gap-4">
      <!-- 左侧列 -->
      <div class="space-y-4">
        <ul class="space-y-4">
          <li v-for="(item, index) in leftItems" :key="index" class="bg-blue-100 p-4 rounded-lg h-[calc(33.333%-1rem)]">
            <h2 class="text-xl font-bold">{{ item.title }}</h2>
            <p>{{ item.content }}</p>
          </li>
        </ul>
      </div>

      <!-- 右侧列 -->
      <div class="space-y-4">
        <ul class="space-y-4">
          <li v-for="(item, index) in rightItems" :key="index" class="bg-green-100 p-4 rounded-lg h-[calc(50%-1rem)]">
            <h2 class="text-xl font-bold">{{ item.title }}</h2>
            <p>{{ item.content }}</p>
          </li>
        </ul>
      </div>
    </div>


    <div class="grid grid-cols-12 grid--rows-12 gap-5">
      <div class="col-span-12 row-span-7">
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const leftItems = [
  { title: '左侧第一行', content: '左侧第一行的内容' },
  { title: '左侧第二行', content: '左侧第二行的内容' },
  { title: '左侧第三行', content: '左侧第三行的内容' }
]

const rightItems = [
  { title: '右侧第一行', content: '右侧第一行的内容' },
  { title: '右侧第二行', content: '右侧第二行的内容' }
]

const getCamer = async () => {
  const res = await getCameraList()

  const obj = {
    camUrl: res.data.camUrl,
  }
  videoList.value.push(obj || {})
}

const doSubmit = () => {
  editForm.value.validate().then((result) => {
    if(result === true){
      let warningTaskList = [];

      editFormData.value.forEach(item => {
        if(editeFormData.value.length == 1) {
          distributeInfomaitonList.value.streeId.forEach(stree => {
            warningTaskList.push({
              streeId: stree,
              warningTitle: item.warningTitle,
              warningContent: item.warningContent,
              warningTime: item.warningTime,
              warningType: item.warningType,
              warningLevel: item.warningLevel,
              warningLevel: item.warningLevel,
            })
          })
        }else if(editFormData.value.length > 1 && item.streetIdList.length > 1){
          item.streetIdList.forEach(street => {
            warningTaskList.push({
              streeId: street,
              warningTitle: item.warningTitle,
              warningContent: item.warningContent,
              warningTime: item.warningTime,
              warningType: item.warningType,
            })
          })
        }
      })
    }
  })
}
</script>
